import React from 'react';
import './index.css';

interface ModuleData {
  title: string;
  more: string;
  images: string[];
}

const moduleData: ModuleData[] = [
  {
    title: "小红书",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=1",
      "https://picsum.photos/300/200?random=2",
      "https://picsum.photos/300/200?random=3",
    ]
  },
  {
    title: "海报",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=4",
      "https://picsum.photos/300/200?random=5",
      "https://picsum.photos/300/200?random=6",
    ]
  },
  {
    title: "公众号用图",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=7",
      "https://picsum.photos/300/200?random=8",
    ]
  },
  {
    title: "免抠元素",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=9",
      "https://picsum.photos/300/200?random=10",
    ]
  },
  {
    title: "电商大促",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=11",
    ]
  },
  {
    title: "摄影图片",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=12",
    ]
  },
  {
    title: "PPT",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=13",
    ]
  },
  {
    title: "视频",
    more: "#",
    images: [
      "https://picsum.photos/300/200?random=14",
    ]
  },
];

const App: React.FC = () => {
  return (
    <div className="container">
      {moduleData.map((module, index) => (
        <div key={index} className="module">
          <div className="module-header">
            <h2>{module.title}</h2>
            <a href={module.more} className="more">更多</a>
          </div>
          <div className="image-list">
            {module.images.map((img, imgIndex) => (
              <img key={imgIndex} src={img} alt={module.title} className="image-item" />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

export default App;